<template>
    <div id="apply">
        <div class="container1">
            <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
                <nut-collapse-item :title="title1" :name="1">
                    <div v-if="inf.id == -1">你不是系统用户，你是谁？！</div>
                    <div style="height: 70vh; overflow: scroll;" v-if="!(inf.id == -1)">
                        <nut-collapse v-model:active="activeName2" :accordion="true">
                            <div @click="addNewAdmission()" v-if="plusShow" style="margin-top: 2vh"><nut-icon font-class-name="iconfont" class-prefix="icon" name="zengjia" size="20"/></div>
                            <div v-for="admission in admissionList" :key="admission.id">
                                <div class="item">
                                    <nut-icon name="issue" style="margin: 0.5vh;" :color="colorState(admission)"></nut-icon>
                                    <nut-collapse-item :title="admission.inf == true ? '新假条' : dateStringfy(admission.begin)" 
                                    :name="admission.id">
                                        <div v-if="!admission.inf">
                                            <nut-input label-width="40" v-model="state.readonly" readonly label="开始" :placeholder="dateStringfy(admission.begin)" />
                                            <nut-input label-width="40" v-model="state.readonly" readonly label="结束" :placeholder="dateStringfy(admission.end)" />
                                            <nut-input label-width="40" v-model="state.readonly" readonly label="原因" :placeholder="admission.reason" />
                                            <div :style="'text-weight: bold; margin: 2vh; color:' + colorState(admission)">{{ stateToStr(admission.state) }}</div>
                                        </div>
                                        <div style="margin-bottom: 2vh;" v-if="admission.inf">
                                            <div>
                                                <nut-cell :title="inf.id"></nut-cell>
                                                <nut-cell title="离校" :desc="descD" @click="showD = true"></nut-cell>
                                                <nut-datepicker
                                                    v-model="currentDateD"
                                                    title="离校"
                                                    type="datetime"
                                                    :min-date="minDateD"
                                                    :max-date="maxDateD"
                                                    @confirm="confirmD"
                                                    v-model:visible="showD" 
                                                ></nut-datepicker> 

                                                <nut-cell title="返校" :desc="descB" @click="showB = true"></nut-cell>
                                                <nut-datepicker
                                                    v-model="currentDateB"
                                                    title="返校"
                                                    type="datetime"
                                                    :min-date="minDateB"
                                                    :max-date="maxDateB"
                                                    @confirm="confirmB"
                                                    v-model:visible="showB" 
                                                ></nut-datepicker> 
                                                <nut-input v-model="reason" left-icon="dongdong" clearable placeholder="请假原因" />
                                                <div style="padding-top: 2vh; padding-bottom: 3vh;">
                                                    <nut-button type="default" @click="apply">提交</nut-button>
                                                </div>
                                            </div>
                                        </div>
                                    </nut-collapse-item>
                                </div>
                                
                            </div>
                        </nut-collapse>
                    </div>
                </nut-collapse-item>
            </nut-collapse>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance} from "vue";
import common from '../Common.vue'
import axios from "axios";
import { Toast } from '@nutui/nutui';
import { useRoute, useRouter } from 'vue-router'
import { reactive, toRefs, h } from 'vue';

export default {
    components: {},
    setup() {
        const id = ref(common.getLoginState().id);
        const isAdmin = common.getLoginState().role == 3 ? true : false;
        const activeName = ref(1);
        const activeName2 = ref(0);
        const title = reactive({
            title1: '假条列表'
        })
        const plusShow = ref(true);
        const userList = ref({});
        const colorState = (admission) => {
            if (admission.state == 0) return "#fe4d55";
            else if (admission.state == 1) return "#4cdc71";
            else if (admission.state == 2) return "#fdb927";
            else return "#fffff";
        }
        const userTmpID = ref("-1");
        let inf = common.getLoginState();
        const showD = ref(false);
        const descD = ref('2022年05月10日');
        const minDateD = new Date();
        const maxDateD = new Date(2025, 10, 1)
        const currentDateD = ref(new Date(2022, 4, 10, 10, 10));

        const showB = ref(false);
        const descB = ref('2022年05月10日');
        const minDateB = ref(new Date());
        const maxDateB = new Date(2025, 10, 1)
        const currentDateB = ref(new Date(2022, 4, 10, 10, 10));

        const confirmD = ({ selectedValue, selectedOptions })=>{
            let sv = selectedValue;
            let tmpDate =  new Date(sv[0], sv[1] - 1, sv[2], sv[3], sv[4]);
            currentDateD.value = new Date(sv[0], sv[1] - 1, sv[2], sv[3], sv[4]);
            minDateB.value = tmpDate;
            descD.value = sv[0] + "年" + sv[1] + "月" + sv[2] + "日 " + sv[3] + ":" + sv[4]; 
        }
        const admissionShow = ref(false);
        const admission = ref({});
        const admissionList = ref([]);
        
        const state = reactive({
            readonly: ''
        });

        // 查找一下是否已经有该学生的请假申请，且状态为null（待审批）
        axios
            .post(common.apiAdmission + "/api/findAllApply")
                .then((res) => { 
                    // 将属于该id的账号假条存入列表
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].userid == inf.id) {
                            // 超时
                            if ((new Date().getTime() - new Date(res.data[i].end).getTime() > 0) && res.data[i].state != 2) {
                                // 将状态改为超时
                                res.data[i].state = 2;
                                axios
                                    .post(common.apiAdmission + "/api/restAdmission", null, { params: {
                                        id: res.data[i].id,
                                        state: res.data[i].state
                                    }})
                                    .then((res) => { 
                                        // console.log(res);
                                    });
                            }
                            admissionList.value.push(res.data[i]);

                        }
                    }
                    // console.log(res);
                });

        
        const confirmB = ({ selectedValue, selectedOptions })=>{
            let sv = selectedValue;
            currentDateB.value = new Date(sv[0], sv[1] - 1, sv[2], sv[3], sv[4]);
            descB.value = sv[0] + "年" + sv[1] + "月" + sv[2] + "日 " + sv[3] + ":" + sv[4]; 
        }

        //请假原因
        let reason = ref("");


        return {
            id,
            isAdmin,
            activeName,
            activeName2,
            userList,
            userTmpID,
            plusShow,
            ...toRefs(title),
            colorState,

            currentDateD,
            showD,
            descD,
            minDateD,
            maxDateD,
            currentDateD,
            showB,
            descB,
            minDateB,
            maxDateB,
            currentDateB,
            confirmD,
            confirmB,
            inf,
            reason,
            admissionShow,
            admission,
            admissionList,

            state
        };
    },
    mounted() {
    },
    methods: {
        addNewAdmission: function() {
            this.admissionList.unshift({
                id: "-1",
                inf: true, // inf为标志，正在申请请假
            })
            this.plusShow = false;
        },
        apply: function() {
            let admission = {
                userid: common.getLoginState().id,
                begin: this.currentDateD,
                end: this.currentDateB,
                reason: this.reason
            }
            axios
                .post(common.apiAdmission + "/api/restApply", admission)
                .then((res) => { 
                    if (res.data.state) {
                        Toast.text(res.data.msg);
                        this.$router.back();
                    } else {
                        Toast.fail(res.data.msg);
                    }
                    // console.log(res);
                });
        },
        dateStringfy: function(date) {
            return (new Date(date).getFullYear() + '-' 
                    + (new Date(date).getMonth() + 1 < 10 ? '0' : '') 
                    + (new Date(date).getMonth() + 1) + '-' 
                    + (new Date(date).getDate() < 10 ? '0' : '') 
                    + new Date(date).getDate() + ' ' 
                    + (new Date(date).getHours() < 10 ? '0' : '') 
                    + new Date(date).getHours() + ':' 
                    + (new Date(date).getMinutes() + 1 < 10 ? '0' : '') 
                    + new Date(date).getMinutes())
        },
        stateToStr: function(state) {
            if (state == null) return "未审核";
            else if (state == 0) return "未通过";
            else if (state == 1) return "已通过";
            else if (state == 2) return "已过期";
            else return "错误";
        }
    }
};
</script>

<style>
    body {
        background-color: rgb(165, 126, 255);
    }
    #apply {
        width: 100%;
        height: 81vh;
        display: flex;
        justify-content: center;
        margin-top: 2vh;
        margin-bottom: 2vh;
        /* background-color: #fff; */
    }
    .container1 {
        width: 80%;
        padding: 0px 2rem 0px 2rem;
        /* height: 10vh; */
        background-color: #ffffff;
        /* overflow: scroll; */
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 1px 5px rgba(48, 48, 48, 0.5);
    }
    .item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>